<doc>
  @author: 李百成
  @description： gojs
</doc>
<template>
  <div class="gojs-warp">
    <div id="myDiagramDiv"></div>
  </div>
</template>

<script>
import * as go from 'gojs'
import img01 from '@/assets/images/001.png'
import img02 from '@/assets/images/002.png'
import img03 from '@/assets/images/003.png'
import img04 from '@/assets/images/004.png'
import img05 from '@/assets/images/005.png'
export default {
  name: 'gojs',
  components: {},
  props: {},
  data () {
    return {}
  },
  mounted () {
    this.initGojs()
  },
  methods: {
    initGojs () {
      const $ = go.GraphObject.make

      // 视图
      const diagram = $(go.Diagram, 'myDiagramDiv', {})

      diagram.nodeTemplate = $(
        go.Node,
        'Auto',
        { locationSpot: go.Spot.Center },
        $(
          go.Shape,
          'RoundedRectangle',
          {
            // default values if the data.highlight is undefined:
            fill: 'yellow',
            stroke: 'orange',
            strokeWidth: 2,
          },
          new go.Binding('fill', 'highlight', function (v) {
            return v ? 'pink' : 'lightblue'
          }),
          new go.Binding('stroke', 'highlight', function (v) {
            return v ? 'red' : 'blue'
          }),
          new go.Binding('strokeWidth', 'highlight', function (v) {
            return v ? 3 : 1
          }),
        ),
        $(go.TextBlock, { margin: 5 }, new go.Binding('text', 'key')),
      )

      diagram.model.nodeDataArray = [
        { key: 'Alpha', highlight: false }, // just one node, and no links
      ]

      function flash () {
        // all model changes should happen in a transaction
        diagram.model.commit(function (m) {
          const data = m.nodeDataArray[0] // get the first node data
          m.set(data, 'highlight', !data.highlight)
        }, 'flash')
      }

      function loop () {
        setTimeout(function () {
          flash()
          loop()
        }, 500)
      }

      loop()
    },
  },
}
</script>

<style lang="less" scoped>
.gojs-warp {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 65px - 16px);
  border: 3px solid palevioletred;
  #myDiagramDiv {
    width: 70vw;
    height: 70vh;
    border: 3px solid palevioletred;
  }
}
</style>
